<script setup>
import { AnHuanAPI } from "@/api/shopInspection/report.js";
const { proxy } = getCurrentInstance();

const { hazard_type, hazard_category, anhuan_status } = proxy.useDict(
  "hazard_type",
  "hazard_category",
  "anhuan_status"
);

// 列表数据
const tableData = ref([]);

// 按钮
const buttonList = ref([
  { type: "export", hasPermi: "finance:dataChange:export" },
]);

const list = ref([
  {
    label: "待处理",
    value: 0,
  },

  {
    label: "已处理",
    value: 1,
  },
  {
    label: "已发起",
    value: 2,
  },
  {
    label: "暂停",
    value: 3,
  },
  {
    label: "抄送",
    value: 4,
  },
]);

// 列表枚举
const column = ref([
  { label: "任务单号", prop: "taskNo", width: "100" },
  { label: "稽查时间", prop: "auditTime", width: "200" },
  { label: "任务状态", prop: "status", width: "180" },
  { label: "部门", prop: "deptName", width: "180" },
  { label: "具体位置", prop: "location", width: "180" },
  { label: "隐患类型", prop: "hazardType", width: "180" },
  { label: "隐患类别", prop: "hazardCategory", width: "180" },
  { label: "隐患描述", prop: "hazardDescription", width: "180" },
  { label: "整改要求", prop: "repairDemand", width: "180" },
  { label: "限期整改时间", prop: "finalRectificationTime", width: "180" },
  { label: "问题照片", prop: "imageUrls", width: "180" },
  { label: "整改后照片", prop: "backImageUrls", width: "180" },
  { label: "安全员", prop: "safetyOfficer", width: "180" },
  { label: "部门负责人", prop: "leader", width: "180" },
  { label: "整改日期", prop: "auditTime", width: "180" },
]);

// 状态
const state = reactive({
  treeLoading: false,
  loading: false, // 列表加载状态
  btnLoading: false, // 按钮加载状态
  row: [],
  isShow: false, // 弹窗状态
  title: "新增", // 弹窗标题
  total: 0, // 列表总量
  radio: "1",
});

// 查询条件
const query = reactive({
  pageNum: 1,
  pageSize: 10,
});

// 查询条件 枚举
const selectList = ref([
  { type: "日期范围" },
  {
    label: "任务单号",
    model: "taskNo",
    type: "输入框",
  },
  {
    label: "隐患级别",
    model: "hazardCategory",
    type: "下拉单选",
    opt: hazard_category,
  },
  {
    label: "安全员",
    model: "safetyOfficer",
    type: "输入框",
  },
  {
    label: "任务状态",
    model: "status",
    type: "下拉单选",
    opt: anhuan_status,
  },
]);
/**
 * 列表复选框
 */
const handleSelectionChange = ({ row, ids }) => {
  state.ids = ids;
  state.row = row;
};
// 导出
const exportFun = () => {};

// 查询条件
const selectSubmit = (val) => {
  Object.keys(val).forEach((keyItem) => (query[keyItem] = val[keyItem]));
  getList();
};
/** 导出按钮操作 */
const handleExport = () => {
  if (state.radio == 2 && state.row.length == 0)
    return proxy.warningMsg("请先选择要导出的数据");
  proxy?.download(
    "/web/statistical/statement/statementExport",
    state.radio == 2 ? { idStr: state.ids.join(","), ...query } : "",
    `安环稽查${new Date().getTime()}.xlsx`
  );
  state.isShow = false;
};
// 获取列表
const getList = async () => {
  state.loading = true;
  try {
    const { data: result } = await AnHuanAPI(query);
    result.result.map((t) => {
      t.imageUrls = t.imageUrls ? JSON.parse(t.imageUrls) : [];
      t.backImageUrls = t.backImageUrls ? JSON.parse(t.backImageUrls) : [];
    });

    tableData.value = result.result;

    state.total = result.total;
  } catch {
  } finally {
    state.loading = false;
  }
};
getList();
</script>

<template>
  <div class="app-container">
    <!-- 查询条件组件 -->
    <p-select-form :selectForm="selectList" @selectSubmit="selectSubmit" />
    <el-card>
      <!-- 按钮组件 -->
      <p-button :list="buttonList" @export="state.isShow = true" />
      <!-- 表格数据 -->
      <p-table
        class="tableClass"
        :loading="state.loading"
        :data="tableData"
        :column="column"
        keyId="id"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        :total="state.total"
        @change="handleSelectionChange"
        @pagination="getList"
      >
        <template #columnCell="{ column, record }">
          <div v-if="column.prop == 'imageUrls'">
            <el-image
              v-for="(item, index) in record.imageUrls"
              :key="index"
              ref="imageRef"
              :preview-src-list="record.imageUrls.map((t) => t.url)"
              style="width: 50px; height: 50px"
              :src="item.url"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              show-progress
              :initial-index="0"
              fit="cover"
            />
          </div>

          <div v-if="column.prop == 'backImageUrls'">
            <el-image
              v-for="(item, index) in record.backImageUrls"
              :key="index"
              ref="imageRef"
              :preview-src-list="record.backImageUrls.map((t) => t.url)"
              style="width: 50px; height: 50px"
              :src="item.url"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              show-progress
              :initial-index="0"
              fit="cover"
            />
          </div>

          <p-dictTag
            v-if="column.label == '任务状态'"
            :options="anhuan_status"
            :value="record.status"
          />
          <p-dictTag
            v-if="column.prop == 'hazardCategory'"
            :options="hazard_category"
            :value="record.hazardCategory"
          />
          <p-Text
            v-if="column.prop == 'hazardType'"
            :options="hazard_type"
            :value="record.hazardType"
          />
        </template>
      </p-table>
    </el-card>

    <!-- 弹窗 新增-修改 -->
    <p-dialog
      v-model="state.isShow"
      :title="'导出'"
      @ok="handleExport()"
      @close="close"
      width="20%"
    >
      <el-radio-group v-model="state.radio">
        <el-radio label="1" size="large">全部导出</el-radio>
        <el-radio label="2" size="large">部分导出</el-radio>
      </el-radio-group>
    </p-dialog>
  </div>
</template>
<style scoped lang="scss"></style>